<template>
  <view>
    <uv-tabs :list="list" @click="onChange"></uv-tabs>

    <block v-if="show">
      <uv-vtabs
        :chain="true"
        :list="medicines"
        :height="height"
        :current="selectIndex"
        hdHeight="100rpx"
        keyName="classicsPrescriptName"
        @change="onChangeDrug"
        barBgColor="#ffffff"
        :barItemStyle="{background: '#ffffff',color: '#5F6680',fontWeight: 'border'}"
        barItemActiveLineStyle="background: #F6F7FB"
        barItemActiveStyle="background: #F6F7FB;color: #4A8993;"
        contentStyle="background: #F6F7FB;"
      >
        <template
          v-if="medicines[selectIndex].classicsPrescriptList.length"
          v-for="(item,index) in medicines[selectIndex].classicsPrescriptList"
        >
          <uv-vtabs-item :index="index" :key="index">
            <view
              :style="{background:index===itemIndex ? '#E6F1F2' : ''}"
              class="flex-col plr18 ptb12 justify-center"
              @click="onSelectItem(item,index)"
            >
              <view :class="{'light' : index===itemIndex} ">
                <text
                  v-if="item.classicsPrescriptName"
                  class="mb5 border ft15"
                >{{item.classicsPrescriptName}}</text>
              </view>
              <view class="gray61 " v-if="item.classicsPrescriptDrugList.length">
                <text
                  v-for="(i,n) in  item.classicsPrescriptDrugList"
                  :key="n"
                  class="mr15"
                >{{i.drugName}} {{i.dosage}}{{i.spec}}</text>
              </view>
              <!-- <view class="gray61">
								<text class="ft10">{{item.desc}}</text>
              </view>-->
            </view>
            <view class="plr15" v-if="index !== medicines.length">
              <uv-gap bg-color="#1C274C" customStyle="opacity: 0.15;" height="1"></uv-gap>
            </view>
          </uv-vtabs-item>
        </template>
      </uv-vtabs>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: 0,
      itemIndex: -1,
      list: [{ name: "经典方" }, { name: "常用方" }, { name: "历史方" }],
      ClassicsPrescriptType: [],
      medicines: [
        {
          classicsPrescriptList: []
        }
      ],
      show: false,
	  tabIndex:0
    };
  },
  computed: {
    height() {
      return uni.getSystemInfoSync().windowHeight * 0.6;
    }
  },
  created() {
    this.getclassicsType();
  },
  methods: {
    init() {},
    async getclassics() {
      let vm = this;
	   let res ;
	  if(this.tabIndex==0){
		res = await this.$api.getClassicsPrescriptByType(
		    this.ClassicsPrescriptType[this.selectIndex]
		  );
		  
	  }else if(this.tabIndex==1){
		 res = await this.$api.searchCommonPrescriptByType(
		    this.ClassicsPrescriptType[this.selectIndex]
		  );
	  }
		
      if (res.code == 200) {
        this.medicines[this.selectIndex] = {
          classicsPrescriptName: this.ClassicsPrescriptType[this.selectIndex],
          classicsPrescriptList: res.data
        };
      }
	  console.log( this.medicines)
      this.$nextTick(() => {
        this.show = true;
		this.$forceUpdate()
      });
    },
    getclassicsType() {
      this.$api.getClassicsPrescriptType().then(res => {
        console.log(res);
        // this.medicines = res.data
		this.selectIndex=0
		this.medicines=[
			{
			  classicsPrescriptList: []
			}
		]
        this.ClassicsPrescriptType = res.data;
        this.getclassics();
      });
    },
    PrescriptList() {
      this.$api.getCommonPrescriptTypeList().then(res => {
        console.log(res);
		this.ClassicsPrescriptType = res.data;
			this.selectIndex=0
		   this.getclassics();
      });
    },
    HistoryPrescript() {
      this.$api.getHistoryPrescript({ orderStatusList: [] }).then(res => {
        console.log(res);
      });
    },
    onChange(e) {
      console.log(e);
	  this.tabIndex=e.index
      if (e.index == 1) {
        this.PrescriptList();
      } else if (e.index == 2) {
        this.HistoryPrescript();
      } else {
        this.getclassicsType();
      }
    },
    onChangeDrug(e) {
      this.selectIndex = e;
	    this.getclassics();
    },
    onSelectItem(item, index) {
      console.log(item);
      this.itemIndex = index;
      this.$emit("confirm", item);
    }
  }
};
</script>
	
<style scoped>
		
	
</style>